<template>
  <div class="dd">
    <div class="btnList">
      <el-button @click="addRole">添加权限</el-button>
      <el-button @click="updataRol">编辑权限</el-button>
      <el-button @click="delReso">删除权限</el-button>
    </div>
    <div v-if="resoList.data">
      <el-table
        ref="multipleTable"
        :data="resoList.data.records"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @select="select"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="rname" label="资源名称" width="180">
        </el-table-column>
        <el-table-column prop="rsourceKey" label="资源编码" width="180">
        </el-table-column>
        <el-table-column prop="rsourceUrl" label="URL链接"></el-table-column>
        <el-table-column prop="rparetId" label="上级编码"  show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="rresourceorder"
          label="资源类型"
        ></el-table-column>
        <el-table-column prop="ricon" label="菜单图标"></el-table-column>
        <el-table-column prop="rdescription" label="描述"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
      </el-table>
    </div>
    <!-- 添加权限弹窗 -->
    <el-dialog
      :title="userId ? '新增资源' : '修改资源'"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-form-item label="资源名称">
          <el-input v-model="form.rname"></el-input>
        </el-form-item>
        <el-form-item label="资源编码">
          <el-input v-model="form.rsourceKey"></el-input>
        </el-form-item>
        <el-form-item label="URL链接">
          <el-input v-model="form.rsourceUrl"></el-input>
        </el-form-item>
        <el-form-item label="上级编码">
          <el-input v-model="form.rparetId"></el-input>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-select v-model="form.rresourceorder" placeholder="请选择资源类型">
            <el-option label="zy1" value="0"></el-option>
            <el-option label="zy2" value="1"></el-option>
            <el-option label="zy3" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源图标">
          <el-input @focus="openIcon" v-model="form.ricon"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.rdescription"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 图标授权弹窗 -->
    <el-dialog
      title="图标"
      :visible.sync="iconDialogVisible"
      width="50%"
      :before-close="iconhandleClose"
    >
      <div class="iconList" @click="getIconName">
        <div class="iconItem" v-for="item in 3" :key="item">
          <i class="el-icon-edit"></i>
          <span>asdas</span>
        </div>
        <div class="iconItem">
          <i class="el-icon-delete-solid"></i>
          <span>asdas</span>
        </div>
        <div class="iconItem">
          <i class="el-icon-setting"></i>
          <span>asdas</span>
        </div>
        <div class="iconItem">
          <i class="el-icon-more-outline"></i>
          <span>asdas</span>
        </div>
        <div class="iconItem">
          <i class="el-icon-warning"></i>
          <span>asdas</span>
        </div>
        <div class="iconItem">
          <i class="el-icon-star-off"></i>
          <span>asdas</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="iconDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { insertReso, deleteReso, updateReso } from "@/api/userManage/api";
export default {
  name: "ResourceManage",
  data() {
    return {
      userId:false,
      isInsert: true,
      pageInfo: {
        page: 1,
        size: 20,
        search: "",
      },
      iconDialogVisible: false,
      addDialogVisible: false,
      tableData: [
        {
          id: 1,
          resoName: "系统设置",
          resoCode: "system",
          url: "asdgakgfsfbhbfgsfgsj",
          parentCode: "asdasdasdasda",
          resoType: "目录",
          menuIcon: "564",
          des: "系统设置",
          createTime: "2023.03.21",
        },
        {
          id: 2,
          resoName: "系统设置",
          resoCode: "system",
          url: "asdgakgfsfbhbfgsfgsj",
          parentCode: "asdasdasdasda",
          resoType: "目录",
          menuIcon: "564",
          des: "系统设置",
          createTime: "2023.03.21",
        },
        {
          id: 3,
          resoName: "系统设置",
          resoCode: "system",
          url: "asdgakgfsfbhbfgsfgsj",
          parentCode: "asdasdasdasda",
          resoType: "目录",
          menuIcon: "564",
          des: "系统设置",
          createTime: "2023.03.21",
          children: [
            {
              id: 31,
              resoName: "系统设置",
              resoCode: "system",
              url: "asdgakgfsfbhbfgsfgsj",
              parentCode: "asdasdasdasda",
              resoType: "目录",
              menuIcon: "564",
              des: "系统设置",
              createTime: "2023.03.21",
            },
            {
              id: 32,
              resoName: "系统设置",
              resoCode: "system",
              url: "asdgakgfsfbhbfgsfgsj",
              parentCode: "asdasdasdasda",
              resoType: "目录",
              menuIcon: "564",
              des: "系统设置",
              createTime: "2023.03.21",
            },
          ],
        },
        {
          id: 4,
          resoName: "系统设置",
          resoCode: "system",
          url: "asdgakgfsfbhbfgsfgsj",
          parentCode: "asdasdasdasda",
          resoType: "目录",
          menuIcon: "564",
          des: "系统设置",
          createTime: "2023.03.21",
        },
      ],
      // 选中的资源id列表
      resoIdList: [],
      form: {
        rname: "",
        rsourceKey: "",
        rsourceUrl: "",
        rparetId: "",
        rresourceorder: "",
        ricon: "",
        rdescription: "",
      },
    };
  },
  methods: {
    ...mapActions("userList", ["actionGetResoList"]),
    // 获取icon的名字
    getIconName(e) {
      this.form.ricon = e.target._prevClass;
      console.log(this.form.ricon);
    },
    // 打开图标弹窗
    addRole() {
      this.userId = true
      this.isInsert = true;
      this.addDialogVisible = true;
      Object.assign(this.form, {
        rname: "",
        rsourceKey: "",
        rsourceUrl: "",
        // rparetId:'',
        rresourceorder: "",
        ricon: "",
        rdescription: "",
      });
    },
    // 编辑权限
    updataRol() {
      this.userId = false
      if (!this.resoIdList.length) {
        this.$message.error("请选择一条资源编辑");
      } else {
        this.isInsert = false;
        this.addDialogVisible = true;
      }
    },
    // 打开icon对话框
    openIcon() {
      this.iconDialogVisible = true;
    },
    // 删除权限
    async delReso() {
      if (!this.resoIdList.length) {
        this.$message.error("请选择一个要删除资源");
      } else {
        // console.log(this.form.id)
        const res = await deleteReso(this.form.id);
        if (res.code == 200) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      }
    },
    // 关闭图标弹窗
    handleClose() {
      this.toggleSelection()
      this.addDialogVisible = false;
      },
    iconhandleClose() {
      this.iconDialogVisible = false;
    },
    // 点击选项框
    select(selection, row) {
      this.resoIdList = [];
      selection.forEach((item) => {
        this.resoIdList.push(item.id);
      });
      this.form = row;
      console.log(this.resoIdList);
    },
    // 提交表单
    async subUserInfo() {
      console.log(this.form);
      this.handleClose();
      if (this.isInsert) {
        // 新增
        const res = await insertReso(this.form);
        if (res.code == 200) {
          this.$message.success("新增资源成功");
        } else {
          this.$message.error("新增资源失败");
        }
      } else {
        const res = await updateReso(this.form);
        if (res.code == 200) {
          this.$message.success("编辑资源成功");
        } else {
          this.$message.error("编辑资源失败");
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        // 清空resoIdList，form
        this.resoIdList=[]
        this.form = {
          rname: "",
          rsourceKey: "",
          rsourceUrl: "",
          rparetId: "",
          rresourceorder: "",
          ricon: "",
          rdescription: "",
        }
      }
    },
  },
  computed: {
    ...mapState("userList", ["resoList"]),
  },
  mounted() {
    this.actionGetResoList(this.pageInfo);
  },
};
</script>

<style scoped lang="less">
@import "../../../assets/style/table.less";
::v-deep .el-dialog {
  width: 50% !important;
  margin-top: 10vh !important;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .el-form-item {
      width: 45%;
      .el-select {
        width: 100%;
        height: 40px;
      }
      .el-input__inner {
        width: 100%;
        height: 40px;
      }
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
  .iconList {
    // margin: auto;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    .iconItem {
      // width: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 4px;
      i {
        width: 50px;
        height: 50px;
        font-size: 40px;
        border-radius: 10px;
        border: 1px dashed #579090;
        background-color: #002127;
        :focus {
          border: 1px dashed #00e7e7;
          box-shadow: 2px 2px #00e7e7, -2px -2px #00e7e7, 2px -2px #00e7e7,
            -2px 2px #00e7e7;
        }
      }
      span {
        font-size: 14px;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button {
      width: 160px;
      height: 50px;
      background-color: #00e7e7;
    }
  }
}
</style>